<!DOCTYPE html>
<html lang="zh-CN">
@include("admin.header")
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-page-header">
            <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">用户</a>
                  <a><cite>用户组</cite></a>
                </span>
                <h2 class="title">用户组</h2>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="form-box">
                        <div class="layui-form layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-mid">用户名:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                  <input type="text" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">邮箱:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                  <input type="text" autocomplete="off" class="layui-input">
                                </div>
                                <button class="layui-btn layui-btn-blue">查询</button>
                                <button class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                        <a href="{{route('useradd')}}" class="layui-btn layui-btn-blue" >新增</a>
                        <table id="demo" lay-filter="demo"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="style/assets/layui.all.js"></script>
    <script>
      var element = layui.element;
      var table = layui.table;
      var form = layui.form;
      var $ = layui.jquery;

  //展示已知数据
  table.render({
    elem: '#demo'
    ,cols: [[ //标题栏
      {field: 'id', title: 'ID', width: 80, sort: true}
      ,{field: 'name', title: '用户名'}
      ,{field: 'email', title: '邮箱'}
      ,{field: 'created_at', title: '创建时间'}
      ,{fixed: 'right', title:'操作', width:150,templet: function(d){
          return '<a href="/userupdate/'+d.id+'" class="layui-btn layui-btn-xs">编辑</a>\n' +
              '        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
      }}
    ]]
    ,url:"{{route('userlist')}}"
    ,method:"post"
      ,where:{'_token':'{{csrf_token()}}'}
    ,skin: 'line' //表格风格
    ,even: true
    ,page: true //是否显示分页
    ,limits: [5, 7, 10]
    ,limit: 5 //每页默认显示的数量
  });
  //监听行工具事件
  table.on('tool(demo)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
              obj.del();
              layer.close(index);
          });
      } else if(obj.event === 'edit'){
          layer.prompt({
              formType: 2
              ,value: data.email
          }, function(value, index){
              obj.update({
                  email: value
              });
              layer.close(index);
          });
      }
  });
    </script>
</body>
</html>